import React, { useEffect, useState, useCallback } from "react";
import { useRequest } from "ahooks";
// 1. logic collect
// 2. tree shaking
// 3. avoid wrapper hell
// 4. dep clear
const HookComp = () => {
  useEffect(() => {
    const handler = () => {};
    window.addEventListener("onresize", handler);
    return () => {
      window.removeEventListener("onresize", handler);
    };
  }, []);
  const { data, error, loading } = useRequest(
    "https://helloacm.com/api/random/?n=8&x=4"
  );
  const [count, setCount] = useState(0);
  const _onClick = useCallback(() => {
    setCount((c) => c + 1);
  }, []);
  return (
    <div className="hook__container">
      <p>{loading ? "loading" : <p>from data: {data} </p>}</p>
      <p>{count > 0 ? count : null}</p>
      <button onClick={_onClick}>click me</button>
    </div>
  );
};
export default HookComp;
